<template>
  <div>
    <ItemWrap title="当前拣货作业">
      <div class="h-full w-full">
        <transition
          name="fade"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
        >
          <ul class="left_boottom h-full w-full" :key="currentIndex">
            <li class="left_boottom_item" v-for="(item, i) in list" :key="i">
              <span class="orderNum doudong">{{ i + 1 }}</span>
              <div class="inner_right">
                <div class="dibu"></div>
                <div class="flex">
                  <div class="info">
                    <span class="labels">拣货单号：</span>
                    <span class="contents zhuyao doudong wangguan">
                      {{ item.gatewayno }}</span
                    >
                  </div>
                  <div class="info">
                    <span class="labels">开始时间：</span>
                    <span class="contents" style="font-size: 11px">
                      {{ item.createTime }}</span
                    >
                  </div>

                  <div class="info">
                    <span class="labels">需拣数量：</span>
                    <span class="contents" style="font-size: 12px">
                      {{ item.num }}</span
                    >
                  </div>

                  <div class="info">
                    <span class="labels">货区：</span>
                    <span class="contents" style="font-size: 12px">
                      {{ item.CargoArea }}</span
                    >
                  </div>

                  <div class="info">
                    <span class="labels">国别：</span>
                    <span class="contents" style="font-size: 12px">
                      {{ item.gb }}</span
                    >
                  </div>

                  <div class="info">
                    <span class="labels">拣货人：</span>
                    <span class="contents" style="font-size: 12px">
                      {{ item.doPeople }}</span
                    >
                  </div>
                </div>

                <!-- <div class="info addresswrap">
                  <span class="labels">拣货人：</span>
                  <span class="contents ciyao" style="font-size: 12px">
                    {{ item.doPeople }}
                  </span>
                </div> -->
              </div>
            </li>
          </ul>
        </transition>
      </div>
    </ItemWrap>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeMount } from "vue";
import ItemWrap from "./item-wrap/item-wrap.vue";
import { graphic } from "echarts";
import * as echarts from "echarts";
import "../assets/css/mapChart.css";

const list = ref([
  {
    gatewayno: "PH100109",
    createTime: "8-23 08:00:00",
    num: 100,
    CargoArea: "Y-ZB32-GLU", // 货区
    gb: "印尼",
    doPeople: "林世剑",
  },
  {
    gatewayno: "PH1001010",
    createTime: "8-23 08:05:00",
    num: 200,
    CargoArea: "Y-ZB32-GLU", // 货区
    gb: "印尼",
    doPeople: "罗文强",
  },
  {
    gatewayno: "PH1001010",
    createTime: "8-23 08:05:00",
    num: 200,
    CargoArea: "Y-ZB32-GLU", // 货区
    gb: "印尼",
    doPeople: "周建安",
  },
  {
    gatewayno: "PH1001010",
    createTime: "8-23 08:05:00",
    num: 200,
    CargoArea: "Y-ZB32-GLU", // 货区
    gb: "印尼",
    doPeople: "郑元辉",
  },
  {
    gatewayno: "PH1001010",
    createTime: "8-23 08:05:00",
    num: 200,
    CargoArea: "Y-ZB32-GLU", // 货区
    gb: "印尼",
    doPeople: "陈剑宙",
  },
]);
</script>

<style lang="scss" scoped></style>
